<!DOCTYPE html>
<html lang="en">
<head>
    <title>区域今日数据</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <script src="https://file.ggxqce.com/web/vue.min.js"></script>
    <link rel="stylesheet" href="/dist/plugins/calendar/calendar.css" />
    <link rel="stylesheet" href="/dist/css/oa-app.css">
    <script type="text/javascript"
            src="https://api.map.baidu.com/api?v=2.0&ak=18eZsB5LvSoIf1HZOCUBDXKWHMbvhfpa"></script>
</head>
<style>
    body, html {
        width: 100%;
        margin: 0;
        font-family: "微软雅黑";
    }

    #allmap, #allmap2 {
        /*width: 100%;*/
        height: 300px;
        overflow: hidden;
        margin: 0;
        font-family: "微软雅黑";
    }

    [v-cloak] {
        display: none;
    }

    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        font-size: 12px;
    }

    body {
        margin: 1px;
        background: #ffffff;
    }

    .boxBoy {
        background: #fff;
    }

    table {
        border-spacing: 0;
        border-collapse: collapse;
        display: table;
    }

    .weather {
        text-align: center;
        font-size: 16px;
        /*position: absolute;*/
        line-height: 24px;
        float: left;
    }

    th {
        font-weight: normal;
    }

    table.text-center, table.text-center td, table.text-center th {
        text-align: center;
        font-size: 12px;
        margin-top: -1px;
    }

    .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
        border: 1px solid #cbcbcd;
        height: 28px;
        position: relative;
        color: #333;
        padding: 0 4px;
    }

    table th {
        background: #f8f8f8;
    }

    .table-bordered {
        border: 1px solid #cbcbcd;
    }

    .table {
        width: 100%;
        max-width: 100%;
    }

    .hidden {
        display: none;
    }

    .lineOne, .lineTwo {
        text-align: left;
    }

    .tdColor {
        background-color: #f8f8f8;
        font-weight: normal;
    }

    .lineOne span {
        max-height: 24px;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        text-align: left;
    }

    .lineTwo span {
        max-height: 55px;
        line-height: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        text-align: left;
        padding: 5px;

    }

    .div-td-content-more {
        position: absolute;
        height: auto;
        z-index: 999;
        line-height: 20px;
        background-color: #d3e8fd;
        padding: 8px 6px;
        border: 1px solid #e8e8ea;
        display: none;
    }

    .div-td-content-more i {
        width: 15px;
        height: 12px;
        background: url("/dist/img/more-icon.png");
        position: absolute;
        left: 50px;
        top: -12px;
    }

    .clear {
        clear: both
    }

    .boxItem {
        width: 100%;
        margin-top: 5px;
        background: inherit;
        /*background-color: rgba(255, 255, 255, 1);*/
        border: none;
        position: relative;
    }

    .boxItemTitle {
        color: #000;
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 6px;
        text-align: center;
    }

    .home {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 10px;
        height: 14px;
        line-height: 14px;
        text-align: center;
    }

    .dian-icon {
        background: url("/dist/img/dian.png") no-repeat;
        background-size: cover;
        width: 14px;
        height: 14px;
        display: inline-block;
    }

    .jiaobiao, .jiaobiaoNew {
        position: relative;
    }

    .jiaobiao i {
        display: block;
        width: 0;
        height: 0;
        border-width: 0px 0 12px 12px;
        border-style: solid;
        border-color: transparent transparent transparent #2a8cec;
        position: absolute;
        top: 0px;
        left: 0px;
    }

    .jiaobiaoNew i {
        display: block;
        width: 12px;
        height: 12px;
        background: url("/dist/img/newLog2.png");
        background-size: 100% 100%;
        position: absolute;
        top: 0px;
        left: 0px;
    }

    .lineImg {
        padding-top: 5px !important;
        padding-bottom: 10px !important;
    }

    .lineImg img {
        height: 45px;
        width: 45px;
        float: left;
        margin: 10px;
        object-fit: cover;
    }

    .newCustomer {
        background: url(/dist/img/new.png) no-repeat;
        background-size: cover;
        width: 20px;
        height: 20px;
        right: 0;
        top: 2px;
        position: absolute;
    }

    .wajueji {
        padding-left: 140px;
        background: url("/dist/img/wajueji.png") no-repeat;
        background-size: 120px 88px;
        height: 88px;
        line-height: 88px;
        color: red;
        font-size: 14px;
        font-weight: bold;
        margin-left: 50px;
    }

    .qipao {
        /*background: url(/dist/img/qipao.png);*/
        background-size: 100% 100%;
        height: 88px;
        /* padding: 0 20px; */
        padding-left: 20px;
        /*padding-right: 20px;*/
        color: red;
        line-height: 88px;
        float: left;
        font-size: 14px;
        font-weight: bold;
    }

    .plan1 {
        background: url("/dist/img/icon_seal_buhege.png") no-repeat bottom center;
        background-size: 38%;
    }

    .plan2 {
        background: url("/dist/img/icon_seal_buhege.png") no-repeat bottom center;
        background-size: 38%;
    }

    .plan3 {
        background: url("/dist/img/icon_seal_buhege.png") no-repeat bottom center;
        background-size: 35%;
    }

    .boxItemTitleNotice {
        color: red;
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 10px;
        text-align: center;
    }

    .boxItemTitleNotice i {
        background: url("/dist/img/jg.png") no-repeat center center;
        height: 22px;
        width: 22px;
        background-size: cover;
        display: inline-block;
        margin-bottom: -3px;
        margin-left: 5px;
    }

    .boxItemTitleNoticeTime {
        color: red;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 10px;
        text-align: center;
    }

    .boxItemTitleNoticeTime i {
        background: url("/dist/img/jg.png") no-repeat center center;
        height: 16px;
        width: 16px;
        background-size: cover;
        display: inline-block;
        margin-bottom: -3px;
        margin-left: 5px;
    }

    .search-button {
        width: 14px;
        height: 14px;
        background-image: url(/dist/img/glass.jpg);
        border: 0 none;
        cursor: pointer;
        margin-top: 0px;
    }

    input[type=button] {
        outline: none;
    }

    .oaBtn {
        background: url(/dist/img/btn-bj2.png) repeat-y !important;
        background-size: 100% 100% !important;
        color: #fff !important;
    }

    .btn-group-sm > .btn, .btn-sm {
        padding: 2px 10px;
    }

    .btn {
        border-radius: 3px;
        -webkit-box-shadow: none;
        box-shadow: none;
        border: 1px solid transparent;
    }

    .pull-right {
        float: right !important;
    }

    .blue {
        color: #39c;
    }

    .red {
        color: #e03800;
    }

    .weather img {
        height: 26px;
        width: 26px;
        float: left;
    }

    .templateStyle {
        margin-top: 15px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .BMap_cpyCtrl {
        display: none;
    }

    .anchorBL {
        display: none;
    }

    .mapLog {
        /*background: rgb(255, 255, 255);*/
        z-index: 111111;
        overflow: hidden;
    }

    .leftLog {
        height: 16px;
        line-height: 16px;
        float: left;
    }

    .leftLog i {
        width: 8px;
        height: 8px;
        background: #1626ff;
        float: left;
        border-radius: 50%;
        margin: 5px 2px 0px;
    }

    .rightLog {
        height: 16px;
        line-height: 16px;
        float: right;

    }

    .rightLog i {
        width: 8px;
        height: 8px;
        background: red;
        float: left;
        border-radius: 50%;
        margin: 5px 2px 0px;
    }

    .line {
        border-bottom: 4px solid #2a8cec;
    }
    .tryStyle {
        width: 34px;
        height: 17px;
        line-height: 17px;
        font-size: 12px;
        top: 0px;
        right: -3px;
        position: absolute;
        border-radius: 50px;
        margin-top: 4px;
        background: #ff131c;
        color: #fff;
        margin-right: -2px;
        transform: scale(0.7);
    }
    .tryStyle2 {
        width: 34px;
        height: 17px;
        line-height: 17px;
        font-size: 12px;
        top: -3px;
        right: -29px;
        position: absolute;
        border-radius: 50px;
        margin-top: 4px;
        background: #ff131c;
        color: #fff;
        margin-right: -2px;
        transform: scale(0.7);
        text-align: center;
    }
    .tryStyles {
        width: 50px;
        height: 25px;
        line-height: 25px;
        font-size: 12px;
        top: -2px;
        left: 100px;
        position: absolute;
        border-radius: 50px;
        margin-top: 4px;
        background: #ff131c;
        color: #fff;
        margin-right: -2px;
        transform: scale(0.5);
        text-align: center;
    }
    .tryStyles1 {
        width: 50px;
        height: 25px;
        line-height: 25px;
        font-size: 12px;
        top: 16px;
        left: 100px;
        position: absolute;
        border-radius: 50px;
        margin-top: 4px;
        background: #ff131c;
        color: #fff;
        margin-right: -2px;
        transform: scale(0.5);
        text-align: center;
    }
    .ht-rili-leftarr,.ht-rili-rightarr{
        display: none;
    }

</style>
<body>
<section class="content" id="app" v-cloak>
    <div class="div-td-content-more"><i></i></div>
    <!--今日计划-->
    <div class="templateStyle" style="margin-top: 10px;">
        <div class="boxItem">
            <div class="boxBoy">
                <table class="table table-bordered text-center table-width">
                    <tbody>
                    <tr>
                        <td colspan="2" style="width: 75%;padding-left: 90px;">今日计划</td>
                        <td style="background: #2a8cec;color: #fff;width: 25%;" @click="lookInfo">
                            基本信息
                        </td>
                    </tr>
                    </tbody>
                </table>
                <table :class="returnPlanClass(plan)">
                    <tr>
                        <td class="tdColor" style="width: 55px;">姓名</td>
                        <td class="tdColor" style="width: 58px;">客户</td>
                        <td class="tdColor" style="width: 55px;">陪同人</td>
                        <td class="tdColor" style="width: 60px;">拜访目的</td>
                        <td class="tdColor">地点</td>
                    </tr>
                    <tr v-for="(item,i) in plan">
                        <td>
                            {{item.userName}}
                        </td>
                        <template v-if="item.signState==0">
                            <td class="lineOne"><span style="text-align: center;">请假</span></td>
                        </template>
                        <template v-else-if="item.signState==2">
                            <td class="lineOne"><span style="text-align: center;">缺勤</span></td>
                        </template>
                        <template v-else>
                            <template v-if="item.reportState==1">
                                <td class="lineOne" style="width: 58px;">
                            <span style="text-align: center;">{{item.customerName}}
                            </span>
                                </td>
                            </template>
                            <template v-else-if="item.reportState==0">
                                <td class="lineOne" style="width: 58px;">
                            <span style="text-align: center;">未提交
                            </span>
                                </td>
                            </template>
                            <template v-else><td></td></template>
                        </template>
                        <td>{{item.entourage}}</td>
                        <td>{{item.visitGoal}}</td>
                        <td class="lineOne"><span>{{item.customerAddress}}</span></td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <!--考勤签到-->
    <div class="templateStyle">
        <!--天气-->
        <div style="position:relative;height: 28px;border: 1px solid #cbcbcd;background-color: #fff">
            <div class="weather" v-if="weather.text_day"
                 style="position:absolute;top: 0px;left:0px;">
                <b style="margin: 0 2px;">{{weather.text_day}}</b><font
                    class="blue">{{weather.low}}</font>～<font
                    class="red">{{weather.high}}℃</font><img
                    :src="'/dist/img/weather/'+weather.code_day+'.png'"/></div>
            <div style="display:block;text-align: center;line-height: 26px;">考勤签到</div>
            <!--<div style="position:absolute;top: 0;right:0;bottom: 0;font-size: 12px;background: #2a8cec;color: #fff;padding: 3px 6px">-->
            <!--{{signIn.userName}}-->
            <!--</div>-->
        </div>
        <template v-if="signState==='0'">
            <!--请假-->
            <!--<div style="background: #ffffff;padding-left: 16px;padding-top: 16px;font-size: 16px;border: 1px solid #cbcbcd;margin-top: -1px;border-bottom: 0px;">-->
                <!--日期：{{get_date(signIn.beginTime,signIn.endTime)}}-->
            <!--</div>-->
            <!--<div  style="text-align: center;background: #ffffff;padding: 30px;border: 1px solid #cbcbcd;border-top: 0px;">-->
            <div class="calendar-box demo-box" id="demo-box" v-line-inserted2></div>
            <div style="padding:5px 10px;    border: 1px solid rgb(203, 203, 205);">
                <div style="display: flex">
                    <span > 请假原因：</span>
                    <span style="flex: 1" class="qjyy">{{signIn.remark}}</span>
                </div>
            </div>
        </template>
        <template v-else-if="signState==2">
            <!--缺勤-->
            <div  style="text-align: center;background: #ffffff;padding: 30px;border: 1px solid #cbcbcd;border-top: 0px;">
                <div style="text-align: center"><img style="" width="45%" src="/dist/img/icon_seal_queqin.png" style="margin-top: -30px"></div>
            </div>
        </template>
        <template v-else>
            <!--正常签到-->
            <img v-if="signIn.signUrl" :src="signIn.signUrl"
                 alt=""
                 style="width: 100%; height: 400px;display: block;border:  1px solid #cbcbcd;object-fit: fill;">
            <div v-if="signIn.signUrl"
                 style="padding:5px 10px;border:  1px solid #cbcbcd;margin-top: -1px;">
                <div style="display: flex">
                    <span >常驻地：</span>
                    <span style="flex: 1">{{(signIn.residence).replace(/(^\s+)|(\s+$)/g,"")}}</span>
                </div>
                <span style="margin-top: 4px">签到地：{{(signIn.address).replace(/(^\s+)|(\s+$)/g,"")}}</span><br/>
                <span style="margin-top: 4px;">相&nbsp;&nbsp;&nbsp;&nbsp;距：{{signIn.signInAlwaysDistance}}</span>
                <span style="float: right;position: relative;right: 20px;" v-if="isLate(signIn.signCreateTime)">
                    签到时间：{{signIn.signCreateTime}}
                    <template v-if="isLate(signIn.signCreateTime)">
                        <span class="tryStyle2">迟到</span>
                    </template>
                </span>
                <span style="float: right;position: relative;" v-else>
                    签到时间：{{signIn.signCreateTime}}
                </span>
            </div>
            <img v-if="signIn.signOutUrl" :src="signIn.signOutUrl"
                 alt=""
                 style="width: 100%; height: 400px;display: block;border:  1px solid #cbcbcd;object-fit: fill;">
            <div v-if="signIn.signOutUrl"
                 style="padding:5px 10px;border:  1px solid #cbcbcd;margin-top: -1px;">
                <div style="display: flex">
                    <span >常驻地：</span>
                    <span style="flex: 1">{{(signIn.residence).replace(/(^\s+)|(\s+$)/g,"")}}</span>
                </div>
                <div style="margin-top: 4px">
                    <span>签退地：</span>
                    <span>{{(signIn.signOutAddress).replace(/(^\s+)|(\s+$)/g,"")}}</span>
                </div>
                <span style="margin-top: 4px;">相&nbsp;&nbsp;&nbsp;&nbsp;距：{{signIn.signOutAlwaysDistance}}</span>
                <span style="float: right">签退时间：{{signIn.signOutTime}}</span>
            </div>

        </template>
    </div>
    <!--首次面访-->
    <template v-if="signState == 1">
        <div class="templateStyle">
            <div class="boxItem">

                <table class="table table-bordered text-center table-width">
                    <tbody>
                    <tr>
                        <td class="tableTitle" colspan="4">首次面访</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <template v-show="firstFace.signInLongitude">
                <div class="allmap" id="allmap" style="border: 1px solid #cbcbcd;"></div>
            </template>
            <template v-if="!firstFace.signInLongitude">
                <div style="height: 70px;line-height: 70px;text-align: center;background: #ffffff;border: 1px solid #cbcbcd;margin-top: -1px;">
                    <b style="color: red;">缺勤</b>
                </div>
            </template>
            <!--<div id="allmap" style="border:  1px solid #cbcbcd;"></div>-->
            <div style="padding: 5px 10px;border:  1px solid #cbcbcd;margin-top: -1px;position: relative;">
                <div class="mapLog" v-if="firstFace.signTime||firstFace.firstVisitTime">
                    <div style="position: absolute;right: 18px;">
                        <div>
                            <span v-if="firstFace.signTime"  class="leftLog" style="float: left;margin-top: 2px;">
                                <!--<i  style="background: #1626ff;"></i>-->
                                今日考勤签到：{{new Date(firstFace.signTime).Format("hh:mm")}}</span><br>
                            <span v-if="firstFace.signTime"  class="leftLog" style="float: left;margin-top: 4px;">
                                <!--<i  style="background: red;"></i>-->
                                首次面访签到：{{firstFace.firstVisitTime? new Date(firstFace.firstVisitTime).Format("hh:mm") : '&nbsp;--&nbsp;:&nbsp;--'}}</span>
                        </div>
                    </div>

                    <!--<span style="margin-right: 10px;">间隔：{{firstFace.signInDiff?firstFace.signInDiff:'&#45;&#45;'}}</span><br>-->
                    <!--<span style="margin-right: 10px;">距离：{{firstFace.signInDistance?firstFace.signInDistance:'&#45;&#45;'}}</span><br>-->
                    <!--<span style="">时速：{{firstFace.signInspeed?firstFace.signInspeed:'&#45;&#45;'}}</span>-->
                    间隔：
                    <span style="margin-right: 10px;" v-if="firstFace.signInDiff != ''">
                        <span v-if="!timeJq(firstFace.signInDiff)" style="color: red">
                            {{addZeroHour(quMiao(firstFace.signInDiff))?addZeroHour(quMiao(firstFace.signInDiff)):'--'}}
                        </span>
                        <span v-else>
                            {{addZeroHour(quMiao(firstFace.signInDiff))?addZeroHour(quMiao(firstFace.signInDiff)):'--'}}
                        </span>

                                <!--<template>-->
                                    <!--<span class="tryStyles" v-if="!timeJq(firstFace.signInDiff)">不合理</span>-->
                                <!--</template>-->
                            </span>
                    <span v-else>--</span>
                    <br>
                    距离：
                    <span style="margin-right: 10px;" v-if="firstFace.signInDiff != ''">
                        <span  v-if="dJq(firstFace.signInDistance)>15">
                                {{dJq(firstFace.signInDistance)?dJq(firstFace.signInDistance)+'公里':'--'}}
                        </span>
                        <span v-else>
                                {{dJq(firstFace.signInDistance)?dJq(firstFace.signInDistance)+'公里':'--'}}
                        </span>

                                <!--<template>-->
                                    <!--<span class="tryStyles1" v-if="dJq(firstFace.signInDistance)>15">不合理</span>-->
                                <!--</template>-->
                            </span>
                    <span v-else>--</span>
                    <br>
                    时速：<span style="padding-left: 3px;" v-if="firstFace.signInspeed != ''">{{firstFace.signInspeed?firstFace.signInspeed:'--'}}</span>
                    <span v-else style="padding-left: 3px;">--</span>
                </div>
            </div>
        </div>
        <!--上午面访-->
        <div class="templateStyle" v-if="faceVisitAM.length<=0||!faceVisitAM">
            <div class="boxItem">
                <table class="boxBoy">
                </table>
            </div>
        </div>
        <div class="templateStyle" v-else>
            <div class="boxItem">
                <table class="boxBoy">
                    <table class="table table-bordered text-center table-width">
                        <tbody>
                        <tr>
                            <td class="tableTitle" colspan="4">上午面访</td>
                        </tr>
                        <!--<table v-if="faceVisitAM.length<=0||!faceVisitAM"-->
                        <!--style="text-align: center;color:#333;padding-bottom: 5px;"-->
                        <!--class="table table-bordered text-center table-width">-->
                        <!--<tr>-->
                        <!--<td>暂无面访</td>-->
                        <!--</tr>-->
                        <!--</table>-->
                        <table class="table table-bordered text-center table-width"
                               v-for="(item,i) in faceVisitAM">
                            <tbody>
                            <tr>
                                <!--:class="customer.newCustomer=='1'?'tdColor jiaobiaoNew':'tdColor jiaobiao'"-->
                                <td class="tdColor"
                                    style="width: 25%;border-bottom: 4px  solid #2a8cec">客户姓名
                                </td>
                                <td>{{item.customerName}}</td>
                                <td class="tdColor" style="width: 25%;">客户电话</td>
                                <td style="width: 25%;">{{trims(item.customerTel)}}</td>
                            </tr>
                            <tr>
                                <td class="tdColor">客户微信</td>
                                <td>{{trims(item.customerWechat)}}</span></td>
                                <td class="tdColor">陪同人员</td>
                                <td>{{item.entourageName!='无'?item.entourageName:''}}</span></td>
                            </tr>
                            <tr>
                                <td class="tdColor">客户类型</td>
                                <td>{{item.customerType}}</td>
                                <td class="tdColor">客户信用</td>
                                <td>{{item.customerCredit}}</td>
                            </tr>
                            <tr>
                                <td class="tdColor">拜访时间</td>
                                <td>
                                    {{item.arrivalsTime?item.arrivalsTime:"-"}}/{{item.leaveTime?item.leaveTime:"-"}}
                                </td>
                                <td class="tdColor">拜访时长</td>
                                <td>{{item.time}}分</td>
                            </tr>
                            <tr>
                                <td class="tdColor">基本情况</td>
                                <td colspan="3" class="lineTwo"><span>{{item.otherCondition}}</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="tdColor">图片</td>
                                <td class="lineImg" colspan="3">
                                    <div v-if="item.arrivalsImg"
                                         style="border: 1px solid #cbcbcd;width: 45px;height: 45px;float: left;margin: 0 10px 10px 0;">
                                        <img v-if="item.arrivalsImg" :src="item.arrivalsImg"
                                             @click="openImg(item.arrivalsImg)" style="margin: 0;">
                                        <span style="margin-top: 5px;margin-bottom:5px;color: #797878;">签到</span>
                                    </div>
                                    <div v-else
                                         style="border: 1px solid #cbcbcd;width: 45px;height: 45px;float: left;margin: 0 10px 10px 0;">
                                        <img src="/dist/img/zwImg.png" style="margin: 0;">
                                        <span style="margin-top: 5px;margin-bottom:5px;color: #797878;">未签到</span>
                                    </div>
                                    <div v-if="item.leaveImg"
                                         style="border: 1px solid #cbcbcd;width: 45px;height: 45px;float: left;margin: 0 10px 10px 0;">
                                        <img v-if="item.leaveImg" :src="item.leaveImg"
                                             @click="openImg(item.leaveImg)" style="margin: 0;">
                                        <span style="margin-top: 5px;margin-bottom:5px;color: #797878;">签退</span>
                                    </div>
                                    <div v-else
                                         style="border: 1px solid #cbcbcd;width: 45px;height: 45px;float: left;margin: 0 10px 10px 0;">
                                        <img src="/dist/img/zwImg.png" style="margin: 0;">
                                        <span style="margin-top: 5px;margin-bottom:5px;color: #797878;">未签退</span>
                                    </div>
                                </td>

                            </tr>

                            </tbody>
                        </table>
                        </tbody>
                    </table>
                </table>
                <div class="clear"></div>
            </div>
        </div>
        <!--下午面访-->
        <div class="templateStyle" v-if="faceVisitPM.length<=0||!faceVisitPM">
            <div class="boxItem">
                <table class="boxBoy">
                </table>
            </div>
        </div>
        <div class="templateStyle" v-else>
            <div class="boxItem">
                <div class="boxBoy">
                    <table class="table table-bordered text-center table-width">
                        <tbody>
                        <tr>
                            <td class="tableTitle" colspan="4">下午面访</td>
                        </tr>
                        <!--<table v-if="faceVisitPM.length<=0||!faceVisitPM"-->
                        <!--style="text-align: center;color:#333;padding-bottom: 5px;"-->
                        <!--class="table table-bordered text-center table-width">-->
                        <!--<tr>-->
                        <!--<td>暂无面访</td>-->
                        <!--</tr>-->
                        <!--</table>-->
                        <table class="table table-bordered text-center table-width"
                               v-for="(item,i) in faceVisitPM">
                            <tbody>
                            <tr>
                                <!--:class="customer.newCustomer=='1'?'tdColor jiaobiaoNew':'tdColor jiaobiao'"-->
                                <td class="tdColor"
                                    style="width: 25%;border-bottom: 4px  solid #2a8cec">客户姓名
                                </td>
                                <td>{{item.customerName}}</td>
                                <td class="tdColor" style="width: 25%;">客户电话</td>
                                <td style="width: 25%;">{{trims(item.customerTel)}}</td>
                            </tr>
                            <tr>
                                <td class="tdColor">客户微信</td>
                                <td>{{trims(item.customerWechat)}}</span></td>
                                <td class="tdColor">陪同人员</td>
                                <td>{{item.entourageName!='无'?item.entourageName:''}}</span></td>
                            </tr>
                            <tr>
                                <td class="tdColor">客户类型</td>
                                <td>{{item.customerType}}</td>
                                <td class="tdColor">客户信用</td>
                                <td>{{item.customerCredit}}</td>
                            </tr>
                            <tr>
                                <td class="tdColor">拜访时间</td>
                                <td>
                                    {{item.arrivalsTime?item.arrivalsTime:"-"}}/{{item.leaveTime?item.leaveTime:"-"}}
                                </td>
                                <td class="tdColor">拜访时长</td>
                                <td>{{item.time}}分</td>
                            </tr>
                            <tr>
                                <td class="tdColor">基本情况</td>
                                <td colspan="3" class="lineTwo"><span>{{item.otherCondition}}</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="tdColor">图片</td>
                                <td class="lineImg" colspan="3">
                                    <div v-if="item.arrivalsImg"
                                         style="border: 1px solid #cbcbcd;width: 45px;height: 45px;float: left;margin: 0 10px 10px 0;">
                                        <img v-if="item.arrivalsImg" :src="item.arrivalsImg"
                                             @click="openImg(item.arrivalsImg)" style="margin: 0;">
                                        <span style="margin-top: 5px;margin-bottom:5px;color: #797878;">签到</span>
                                    </div>
                                    <div v-else
                                         style="border: 1px solid #cbcbcd;width: 45px;height: 45px;float: left;margin: 0 10px 10px 0;">
                                        <img src="/dist/img/zwImg.png" style="margin: 0;">
                                        <span style="margin-top: 5px;margin-bottom:5px;color: #797878;">未签到</span>
                                    </div>
                                    <div v-if="item.leaveImg"
                                         style="border: 1px solid #cbcbcd;width: 45px;height: 45px;float: left;margin: 0 10px 10px 0;">
                                        <img v-if="item.leaveImg" :src="item.leaveImg"
                                             @click="openImg(item.leaveImg)" style="margin: 0;">
                                        <span style="margin-top: 5px;margin-bottom:5px;color: #797878;">签退</span>
                                    </div>
                                    <div v-else
                                         style="border: 1px solid #cbcbcd;width: 45px;height: 45px;float: left;margin: 0 10px 10px 0;">
                                        <img src="/dist/img/zwImg.png" style="margin: 0;">
                                        <span style="margin-top: 5px;margin-bottom:5px;color: #797878;">未签退</span>
                                    </div>
                                </td>
                            </tr>

                            </tbody>
                        </table>
                        </tbody>
                    </table>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <!--电访-->
        <div class="templateStyle" v-if="telVisit.length<=0||!telVisit">
            <div class="boxItem">
                <table class="boxBoy">
                </table>
            </div>
        </div>
        <div class="templateStyle" v-else>
            <div class="boxItem">
                <div class="boxBoy">
                    <table class="table table-bordered text-center table-width">
                        <tbody>
                        <tr>
                            <td colspan="3" class="tableTitle">电访</td>
                        </tr>
                        <!--<table v-if="telVisit.length<=0||!telVisit"-->
                        <!--style="text-align: center;color:#333;padding-bottom: 5px;"-->
                        <!--class="table table-bordered text-center table-width">-->
                        <!--<tr>-->
                        <!--<td>暂无电访</td>-->
                        <!--</tr>-->
                        <!--</table>-->
                        <table class="table table-bordered text-center table-width">
                            <tbody>
                            <tr>
                                <td class="tdColor" style="width: 25%;">客户姓名</td>
                                <td class="tdColor" style="width: 25%;">拜访时长</td>
                                <td class="tdColor" style="width: 50%;">基本情况</td>
                            </tr>
                            <tr v-for="(item,i) in telVisit">
                                <td>{{item.customerName}}</td>
                                <td>{{item.time}}分</td>
                                <td class="lineOne"><span>{{item.otherCondition}}</span></td>
                            </tr>
                            </tbody>
                        </table>
                        </tbody>
                    </table>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <!--费用-->
        <div class="templateStyle" v-if="cost.length<=0||!cost">
            <div class="boxItem">
                <table class="boxBoy">
                </table>
            </div>
        </div>
        <div class="templateStyle" v-else>
            <div class="boxItem">
                <div class="boxBoy">
                    <table class="table table-bordered text-center table-width">
                        <tbody>
                        <tr>
                            <td class="tableTitle" colspan="4">今日费用</td>
                        </tr>
                        <!--<table v-if="cost.length<=0||!cost"-->
                        <!--style="text-align: center;color:#333;padding-bottom: 5px;"-->
                        <!--class="table table-bordered text-center table-width">-->
                        <!--<tr>-->
                        <!--<td>暂无费用记录</td>-->
                        <!--</tr>-->
                        <!--</table>-->
                        <table class="table table-bordered text-center table-width"
                               v-for="(item,i) in cost">
                            <tbody>
                            <tr>
                                <td class="tdColor"
                                    style="width: 25%;border-bottom: 4px  solid #2a8cec">费用类型
                                </td>
                                <td style="width: 25%;color: rgb(42, 140, 236)">{{item.costSmallName}}</td>
                                <td class="tdColor" style="width: 25%;">金额(元)</td>
                                <td style="width: 25%;color: rgb(42, 140, 236)">{{item.money}}</td>
                            </tr>
                            <tr>
                                <td class="tdColor"  style="width: 25%;">
                                    发票
                                </td>
                                <td style="width: 25%;color: rgb(42, 140, 236)"> {{item.invoiceFlag=="1"?"有":"无"}}</td>
                                <td class="tdColor"  style="width: 25%;">时间</td>
                                <td style="width: 25%;color: rgb(42, 140, 236)">{{new Date(item.createTime).Format('MM-dd hh:mm')}}</td>
                            </tr>
                            <tr>
                                <td class="tdColor">说明</td>
                                <td colspan="3" class="lineTwo">
                                    <!--<span>{{item.invoiceFlag=="1"?"有发票":"无发票"}}{{item.remark==''?'':'，'+item.remark}}</span>-->
                                    <span style="color: rgb(42, 140, 236)"><template v-if="item.costSmallName=='住宿费'">{{(item.cohabitation=='' || item.cohabitation=='无')? '': '合住人：'+item.cohabitation +'，'}}</template>{{item.remark==''?'':''+item.remark}}</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="tdColor">附件</td>
                                <td class="lineImg" colspan="3">
                                    <template v-for="(url,i) in (item.img).split(',')">
                                        <img  :src="url" v-if="url"
                                              @click="openImg(item.img,i)" alt=""
                                              style="border: 1px solid #cbcbcd;width: 45px;height: 45px;float: left;margin: 2px;">
                                    </template >
                                </td>

                            </tr>

                            </tbody>
                        </table>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <!--应收报表-->
        <div class="templateStyle" v-if="ysList.length<=0||!ysList">
            <div class="boxItem">
                <table class="boxBoy">
                </table>
            </div>
        </div>
        <div class="templateStyle" v-else style="margin-bottom: 15px;">
            <div class="boxItem">
                <div class="boxBoy">
                    <table class="table table-bordered text-center table-width">
                        <tbody>
                        <tr>
                            <td class="tableTitle" colspan="5">应收报表</td>
                        </tr>
                        <table class="table table-bordered text-center table-width">
                        <tbody>
                        <tr>
                            <td class="tdColor" style="width: 16%">客户</td>
                            <td class="tdColor" style="width: 21%">到期日期</td>
                            <td class="tdColor" style="width: 21%">到期金额</td>
                            <td class="tdColor" style="width: 21%">逾期罚息</td>
                            <th class="tdColor" style="width: 21%">合计</th>
                        </tr>
                        <tr v-for="(item,i) in tablesMergeCell(ysList)">
                            <td class="lineOne" style="background-color: white;" :rowspan="item.buyerspan" :class="{hidden: item.buyerdis}">
                            <span  style="color:#2a8cec;cursor: pointer;text-align: center;"
                                   @click="goDetail('look',item)">
                                {{item.buyer}}
                            </span>
                            </td>
                            <td style="text-align: left !important;padding-left: 10px">
                                <span>{{item.repaymentDate.substring(5)}}</span>
                                <span style="text-align: center"
                                      v-if="(Number(item.overduePenalty)>0||Number(item.remainingArrears)>0)&&compareFiveDate(item.repaymentDate)<0"
                                      class="tryStyle">逾期</span>
                                <span v-else-if="Number(item.total)>0 && Number(item.overduePenalty)==0"
                                      class="tryStyle"
                                      style="background: #2a8cec;color: #fff;text-align: center">到期</span>
                            </td>
                            <td :style="item.remainingArrears?'text-align: right':'text-align: right'"
                                v-if="(item.overduePenalty && Number(item.overduePenalty)>0)||(item.remainingArrears && Number(item.remainingArrears)>0)">
                                <span class="lineOne">{{item.remainingArrears ?fmoney(item.remainingArrears):'-'}}</span>
                            </td>
                            <td v-else :style="item.total?'text-align: right':'text-align: right'">
                                <span>{{item.total ? fmoney(item.total) :'-'}}</span>
                            </td>
                            <td :style="item.overduePenalty ? 'text-align: right':'text-align: right'">
                    <span class="lineOne"
                          v-if="(Number(item.overduePenalty)>0||Number(item.remainingArrears)>0)&&compareFiveDate(item.repaymentDate)<0"> {{item.overduePenalty? fmoney(item.overduePenalty):'未知'}}</span>

                                <span class="lineOne" v-else> {{item.overduePenalty? fmoney(item.overduePenalty):'-'}}</span>
                            </td>
                            <td :style="item.newMoney? 'text-align: right':'text-align: right'" :rowspan="item.buyerspan"
                                :class="{hidden: item.buyerdis}">
                                {{item.newMoney? fmoney(item.newMoney):'-'}}
                            </td>
                        </tr>
                        </tbody>
                    </table>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </template>
    <div style="margin-bottom: 15px;"></div>

</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="/dist/plugins/scroll/myScroll.js"></script>
<!--框架已定义 JS-->
<!--oa自定义  JS-->
<script src="/dist/js/oaApp.js"></script>

<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script src="/dist/plugins/calendar/calendar-pro.js"></script>

<script>
    $(function () {
        $("body").on("click", ".lineOne,.lineTwo", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + "px",
                        "left": $(this).offset().left,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
</script>
<script>
    $.ajaxSetup({
        global: true,
        type: "POST",
        cache: false,
        dataType: "json",
        contentType: 'application/json;charset=utf-8',
        beforeSend: function () {
        },
        complete: function () {

        },
        error: function (e) {
            alert('error' + e.responseText);
        }
    });
    $.extend($.wyui, {
        postMethod: function (url, data, callback, sync, id) {
            if (!id) {
                id = "#app"
            }
            $.ajax({
                url: server.ip + url,
                async: sync ? false : true,
                data: JSON.stringify(data),
                beforeSend: function () {

                },
                complete: function () {
                    setTimeout(function () {
                    }, 1000);

                },
                success: function (r) {
                    if (!r.e.code) {
                        callback(r.data.sendData);
                    } else {
                        alert(r.e.desc);
                    }
                },
                error: function (e) {
                    alert(url + e.responseText);
                }
            });
        },
    });
</script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            userId: getUrlParamObj().userId,
            dateTime: getUrlParamObj().dateTime,
            roleName:getUrlParamObj().roleName,
            plan: {},
            signIn: {},
            firstFace: {},
            weather: {},
            signState: '',
            faceVisitAM: {},
            faceVisitPM: {},
            telVisit: {},
            cost: {},
            haveSettle: false,
            ysList: [],
            pageType: getUrlParamObj().pageType,
            searchParams: {
                auditFlag: 1,
                haveDelivery: 1,
                haveSettle: 0,
                userId: getUrlParamObj().userId,
                customerKeyId: '',
                createUserId: '',
                customerKey: '',
                createUserName: '',
            },
        },
        methods: {
            //一线是否迟到
            isLate: function (dateStr) {
                var date = new Date('2018-01-01 '+dateStr)
                if (date.getHours() == 8 && date.getMinutes() > 0) {
                    return true
                } else if (date.getHours() > 8) {
                    return true
                } else {
                    return false
                }
            },
            isFair: function (item) {
                var str = '';
                if (!this.distanceJq(item.signInDistance) && !this.timeJq(item.signInTimeDiff)) {
                    str = "距离、时间不合理"
                }
                else if (!this.distanceJq(item.signInDistance)) {
                    str = "距离不合理"
                }
                else if (!this.timeJq(item.signInTimeDiff)) {
                    str = "时间不合理"
                }
                return str
            },
            //距离合理->true 不合理->false
            distanceJq: function (d) {
                var str = d.replace("公里", "");
                return Number(str) < 15
            },
            fmoney: function (s, n) {
                n = n > 0 && n <= 20 ? n : 2;
                s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
                var l = s.split(".")[0].split("").reverse(), r = s.split(".")[1],
                    t = "";
                for (i = 0; i < l.length; i++) {
                    t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
                }
                return t.split("").reverse().join("") + "." + r;
            },
            //时间合理->true 不合理->false
            timeJq: function (t) {
                if (t.indexOf("小时") > 0) {
                    var hour = t.split("小时")[0];
                    if (Number(hour) > 0) {
                        return false;
                    }
                } else {
                    if (t.indexOf("分") > 0) {
                        var min = t.split("分")[0];
                        if (Number(min) > 30) {
                            return false;
                        }
                    } else {
                        return true;
                    }
                }
                return true;
            },
            //距离间隔
            dJq: function (d) {
                var str = d.replace("公里", "");
                console.log("距离间隔 = "+ str)
                if (str == '0') {
                    return '';
                } else {
                    return Number(str).toFixed(2);
                }
            },
            //速度
            disJq: function (dis) {
                var str = dis.replace("km/h", "");
                return str;
            },
            //去秒加0几分
            quMiao: function (m) {
                if (!m) return ""
                //1小时11分11秒
                var hour = "0"
                var min = "0"
                var sec = "0"

                if (m.indexOf("小时") > 0) {
                    //{1  , 11分11秒} 1小时55秒
                    hour = m.split("小时")[0]
                }
                if (m.indexOf("分") > 0) {
                    //{1小时11，11秒}
                    min = m.split("分")[0]
                    if (min.indexOf("小时") > 0) {
                        //{1,11}
                        min = min.split("小时")[1]
                    }
                    if (Number(min) < 10) {
                        min = "0" + min
                    }
                }
                if (min == "0" && m.indexOf("秒") > 0) {
                    //21秒
                    return hour+"小时01分"
                }
                return hour + "小时" + min + "分"
            },
            //添加0小时xx分
            addZeroHour: function (h) {
                if (!h) {
                    return ""
                }
                if (h.indexOf('小时') > 0) {
                    return h
                } else {
                    return "0小时" + h
                }
            },
            getCountDays: function (dateStr) {//返回当月的天数
                var curDate = new Date(dateStr);
                var curMonth = curDate.getMonth();
                curDate.setMonth(curMonth + 1);
                curDate.setDate(0);
                return curDate.getDate();
            },
            get_date: function (list) {
                var data;
                var current = [];
                var last = [];
                var next = [];
                var benNian = new Date().Format("yyyy");
                var benYue = new Date().Format("M");
                var lastTime = '';
                var currentTime = new Date().Format("yyyy-MM");
                var today = new Date().Format("yyyy-MM-dd");
                var nextTime = '';
                if (Number(benYue) + 1 > 12) {
                    nextTime = Number(benNian) + 1 + "-01"
                } else if (Number(benYue) + 1 < 10) {
                    nextTime = Number(benNian) + "-0" + (Number(benYue) + 1)
                } else {
                    nextTime = Number(benNian) + "-" + (Number(benYue) + 1)
                }
                if (Number(benYue) - 1 < 1) {
                    lastTime = Number(benNian) - 1 + "-12"
                } else if (Number(benYue) - 1 < 10) {
                    lastTime = Number(benNian) + "-0" + (Number(benYue) - 1)
                } else {
                    lastTime = Number(benNian) + "-" + (Number(benYue) - 1)
                }
                for(var i=0;i<list.length;i++){
                    if (lastTime == list[i].leaveDate.substring(0, 7)) {
                        last.push({date: list[i].leaveDate, data: '假',yy:list[i].remark})
                    }
                    if (currentTime == list[i].leaveDate.substring(0, 7)) {
                        if(today == list[i].leaveDate){
                            current.push({date:list[i].leaveDate, data: '假',today:true,yy:list[i].remark})
                        }else{
                            current.push({date:list[i].leaveDate, data: '假',yy:list[i].remark})
                        }
                    }
                    if (nextTime == list[i].leaveDate.substring(0, 7)) {
                        next.push({date: list[i].leaveDate, data: '假',yy:list[i].remark})
                    }
                }
                data = {
                    last: last,
                    current: current,
                    next: next
                }
                console.log(data)
                return data

            },
            returnPlanClass: function (list) {
                var count = 0
                for (var i = 0; i < list.length; i++) {
                    if (list[i].customerAddress) {
                        count++
                    }
                }
                if (count < 3) {
                    return "table table-bordered text-center table-width"
                } else {
                    return "table table-bordered text-center table-width"
                }
            },
            //合并单元格
            tablesMergeCell: function (list) {
                for (field in list[0]) {
                    var k = 0;
                    while (k < list.length) {
                        list[k][field + 'span'] = 1;
                        list[k][field + 'dis'] = false;
                        for (var i = k + 1; i <= list.length - 1; i++) {
                            if (list[k][field] == list[i][field] && list[k][field] != '') {
                                list[k][field + 'span']++;
                                list[k][field + 'dis'] = false;
                                list[i][field + 'span'] = 1;
                                list[i][field + 'dis'] = true;
                            } else {
                                break;
                            }
                        }
                        k = i;
                    }
                }
                return list;
            },
            //去空格
            trims: function (data) {
//                console.log(data);
                var data = data.replace(/[ ]/g, "");
                return data;
            },
            //获取第二天拜访计划
            get_plan: function () {
                var that = this;
                $.wyui.postMethod(urlConfig.newReportForm.getTodayPlanByUserIdAndDateTime, {
                    "userId": that.userId,
                    "dateTime": that.dateTime
                }, function (data) {
                    console.log(data)
                    var len = data.records.length;
                    console.log(len)
                    var obj = {};
                    for (var i = data.records.length; i < 5; i++) {
                        data.records.push(obj)
                    }
                    that.plan = data.records;
                    console.log("ccc" + that.plan);
                    that.plan.len = len
                });
            },
            //获取天气
            get_weather: function () {
                var that = this;
                $.wyui.postMethod(urlConfig.other.getTheWeather, {
                    "lat": that.signIn.latitude,
                    "lng": that.signIn.longitude
                }, function (data) {
                    that.weather = data.weather[0];
                    console.log(that.weather);
                });
            },
            //获取考勤签到
            get_signIn: function () {
                var that = this;
                $.wyui.postMethod(urlConfig.newReportForm.getSignPersonByToday, {
                    "userId": that.userId,
                    "dateTime": that.dateTime
                }, function (data) {
                    console.log(data.signState)
                    that.signState = data.signState;
                    that.signIn = data.result;
                    if(that.signIn.latitude){
                        that.get_weather();
                    }
                    console.log(that.signIn)
                });
            },
            //获取首次面访
            get_firstFace: function () {
                var that = this;
                $.wyui.postMethod(urlConfig.newReportForm.getFirstVisitAndSignForToday, {
                    "userId": that.userId,
                    "dateTime": that.dateTime
                }, function (data) {
                    console.log(data)
                    that.firstFace = data.records
                    showBMap()
                });
            },
            //获取上午面访 下午面访 电访
            get_faceVisit: function () {
                var that = this;
                $.wyui.postMethod(urlConfig.newReportForm.getForPersonalDayByUserIdAndDateTime, {
                    "userId": that.userId,
                    "dateTime": that.dateTime,
                    "type": '1',
                    "status": '0'
                }, function (data) {
                    console.log(data)
                    that.faceVisitAM = data.records;
                });
                $.wyui.postMethod(urlConfig.newReportForm.getForPersonalDayByUserIdAndDateTime, {
                    "userId": that.userId,
                    "dateTime": that.dateTime,
                    "type": '1',
                    "status": '1'
                }, function (data) {
                    console.log(data)
                    that.faceVisitPM = data.records;
                });
                $.wyui.postMethod(urlConfig.newReportForm.getForPersonalDayByUserIdAndDateTime, {
                    "userId": that.userId,
                    "dateTime": that.dateTime,
                    "type": '0',
                    "status": '1'
                }, function (data) {
                    console.log(data)
                    that.telVisit = data.records;
                });
            },
            //获取今日费用
            get_cost: function () {
                var that = this;
                $.wyui.postMethod(urlConfig.newReportForm.getForPersonalCostByUserIdAndDateTime, {
                    "userId": that.userId,
                    "dateTime": that.dateTime
                }, function (data) {
                    console.log(data.records)
                    that.cost = data.records;
                });
            },
            getNowDate: function () {
                var now = new Date();
                var year = now.getFullYear();
                var month = (now.getMonth() + 1).toString();
                var day = (now.getDate()).toString();
                var hour = (now.getHours()).toString();
                var minute = (now.getMinutes()).toString();
                var second = (now.getSeconds()).toString();
                if (month.length == 1) {
                    month = "0" + month;
                }
                if (day.length == 1) {
                    day = "0" + day;
                }
                if (hour.length == 1) {
                    hour = "0" + hour;
                }
                if (minute.length == 1) {
                    minute = "0" + minute;
                }
                if (second.length == 1) {
                    second = "0" + second;
                }
                var dateTime = year + "-" + month + "-" + day;
                return dateTime;
            },
            compareFiveDate: function (ydDate) {
                var aDate = new Date(this.getNowDate()); // 通过日期字符串，初始化第一个日期对象
                var bDate = new Date(ydDate); // 同上，初始化第二个日期对象
                var aDay = 24 * 60 * 60 * 1000; // 完整一天有24小时，将小时换算成毫秒时间戳
                var diffDay = (bDate - aDate) / aDay; // 计算间隔天数（注意日期隐式转换）
                console.log(diffDay); // 2，23日-25日间隔2天
                return diffDay;
            },
            //获取应收报表
            get_ysList: function () {
                var that = this;
                if (this.haveSettle) {
                    this.searchParams.haveSettle = ""
                } else {
                    this.searchParams.haveSettle = 0
                }

                $.wyui.postMethod(urlConfig.newDaQuReportForm.selectContractAccountListApp, {
                    auditFlag: 1,
                    haveDelivery: 1,
                    haveSettle: 0,
                    userId: getUrlParamObj().userId,
                    customerKeyId: '',
                    createUserId: '',
                    customerKey: '',
                    createUserName: '',
                }, function (data) {
                    console.log(data.records)
                    var list1 = [];
                    for (var i = 0; i < data.records.length; i++) {
                        if (that.roleName == '大区经理' || that.roleName == '区域经理' || that.roleName == '区域支持' || that.roleName == '销售管理' || that.roleName == '集团销售管理'|| that.roleName == '后台管理') {
                            if (data.records[i].repaymentDate && data.records[i].haveDsdf == '0' && (data.records[i].type != '2' && data.records[i].type != '4')) {
                                list1.push(data.records[i])
                            }
                            if (data.records[i].repaymentDate && data.records[i].haveDsdf == '1' && (data.records[i].type != '10' && data.records[i].type != '12')) {
                                list1.push(data.records[i])
                            }
                        }else{
                            if ((Number(data.records[i].overduePenalty) > 0 || Number(data.records[i].remainingArrears) > 0)&&that.compareFiveDate(data.records[i].repaymentDate)<0){
                                if (data.records[i].repaymentDate && data.records[i].haveDsdf == '0' && (data.records[i].type != '2' && data.records[i].type != '4')) {
                                    list1.push(data.records[i])
                                }
                                if (data.records[i].repaymentDate && data.records[i].haveDsdf == '1' && (data.records[i].type != '10' && data.records[i].type != '12')) {
                                    list1.push(data.records[i])
                                }
                            }

                        }
                    }
                    for(var a=0;a<list1.length;a++){
                        var item=list1[a];
                        if(item.overduePenalty && Number(item.overduePenalty)>0||item.remainingArrears && Number(item.remainingArrears)>0){
                            item.count=Number(item.remainingArrears)+Number(item.overduePenalty)
                        }else{
                            item.count=Number(item.total)+Number(item.overduePenalty)
                        }
                    }

                    for(var a=0;a<list1.length;a++){
                        var newMoney=list1[a].count;
                        for(var b=0;b<list1.length;b++){
                            if(list1[a].buyer==list1[b].buyer&&list1[a].id==list1[b].id&&a!=b){
                                newMoney+=Number(list1[b].count)
                            }
                        }
                        list1[a].newMoney=newMoney;
                    }
                    that.ysList = list1;
//                    that.ysList = data.records.filter(function (element, i, self) {
//                        if (self[i].haveOverdue == '1' || self[i].haveOverdue == '2') {
//                            //逾期和快到期
//                            return true;
//                        }
//                    })
                });
            },
            //js取当天日期的前五天
            getBeforeDate:function (n) {
                var n = n;
                var d = new Date();
                var year = d.getFullYear();
                var mon=d.getMonth()+1;
                var day=d.getDate();
                if(day <= n){
                    if(mon>1) {
                        mon=mon-1;
                    }
                    else {
                        year = year-1;
                        mon = 12;
                    }
                }
                d.setDate(d.getDate()-n);
                year = d.getFullYear();
                mon=d.getMonth()+1;
                day=d.getDate();
                s = year+"-"+(mon<10?('0'+mon):mon)+"-"+(day<10?('0'+day):day);
                return s;
            },
            //app打开图片
            openImg: function (url, index) {
                if (!index) {
                    index = 0
                }
                var obj = {
                    type: 'img',
                    imgList: url,
                    position: index,
                }
                prompt(JSON.stringify(obj))
            },
            get_roleName: function () {
                var that = this;
                $.wyui.postMethod(urlConfig.newZXQReportForm.getRoleNameByUserId, {
                    "userId": that.searchParams.userId,
                }, function (data) {
                    that.roleName = data.records;

                },true);

            },
            //打开基本信息
            lookInfo: function () {
                var that = this
                var obj = {
                    type: 'customerList',
                    url: '/reportForm/personnel/entry.html?userId=' + that.userId,
                    name: '基本信息'
                }
                prompt(JSON.stringify(obj));
            },
            goDetail: function (type, item) {
                var obj = {
                    type: 'goDetail',
                    url: '/apply/accountReceivable/detailApp.html?id=' + item.id + "&pageType=look&userId=" + getUrlParamObj().userId,
                    id: item.id,
                    name: "应收详情",
                    screenType: '0',
                }
                prompt(JSON.stringify(obj))
            },
        },
        mounted: function () {
            var that = this;
            that.get_roleName();
            that.get_plan();
            that.get_signIn();
            that.get_firstFace();
            that.get_faceVisit();
            that.get_cost();
            that.get_ysList();
        }
    })
</script>
<script type="text/javascript">
    // 百度地图API功能
    function showBMap() {
        var map = new BMap.Map("allmap");

        // 复杂的自定义覆盖物
        function ComplexCustomOverlay(point, text) {
            this._point = point;
            this._text = text;

        }

        ComplexCustomOverlay.prototype = new BMap.Overlay();
        ComplexCustomOverlay.prototype.initialize = function (map) {
            this._map = map;
            var div = this._div = document.createElement("div");
            div.style.position = "absolute";
            div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
            div.style.backgroundColor = "#fff";
            div.style.border = "1px solid #333";
            div.style.color = "#333";
            div.style.height = "22px";
            div.style.paddingLeft = "2px";
            div.style.paddingRight = "2px";
            div.style.lineHeight = "20px";
            div.style.whiteSpace = "nowrap";
            div.style.MozUserSelect = "none";
            div.style.fontSize = "12px"
            var span = this._span = document.createElement("span");
            div.appendChild(span);
            span.appendChild(document.createTextNode(this._text));
            var that = this;

            var arrow = this._arrow = document.createElement("div");
            arrow.style.background = "url(/dist/img/jiao2.png) no-repeat";
            arrow.style.position = "absolute";
            arrow.style.width = "11px";
            arrow.style.height = "10px";
            arrow.style.top = "19px";
            arrow.style.left = "10px";
            arrow.style.overflow = "hidden";
            div.appendChild(arrow);

            map.getPanes().labelPane.appendChild(div);

            return div;
        }
        ComplexCustomOverlay.prototype.draw = function () {
            var map = this._map;
            var pixel = map.pointToOverlayPixel(this._point);
            this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
            this._div.style.top = pixel.y - 65 + "px";
        }

        // 复杂的自定义覆盖物2
        function ComplexCustomOverlay2(point, text) {
            this._point = point;
            this._text = text;

        }

        ComplexCustomOverlay2.prototype = new BMap.Overlay();
        ComplexCustomOverlay2.prototype.initialize = function (map) {
            this._map = map;
            var div = this._div = document.createElement("div");
            div.style.position = "absolute";
            div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
            div.style.backgroundColor = "#fff";
            div.style.border = "1px solid #333";
            div.style.color = "#333";
            div.style.height = "22px";
            div.style.paddingLeft = "2px";
            div.style.paddingRight = "2px";
            div.style.lineHeight = "20px";
            div.style.whiteSpace = "nowrap";
            div.style.MozUserSelect = "none";
            div.style.fontSize = "12px"
            var span = this._span = document.createElement("span");
            div.appendChild(span);
            span.appendChild(document.createTextNode(this._text));
            var that = this;

            var arrow = this._arrow = document.createElement("div");
            arrow.style.background = "url(/dist/img/jiao2.png) no-repeat";
            arrow.style.position = "absolute";
            arrow.style.width = "11px";
            arrow.style.height = "10px";
            arrow.style.top = "19px";
            arrow.style.left = "10px";
            arrow.style.overflow = "hidden";
            div.appendChild(arrow);

            map.getPanes().labelPane.appendChild(div);

            return div;
        }
        ComplexCustomOverlay2.prototype.draw = function () {
            var map = this._map;
            var pixel = map.pointToOverlayPixel(this._point);
            this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
            this._div.style.top = pixel.y - 86 + "px";
        }

        //根据经纬度的距离获取地图的缩放级
        function getRoom(diff) {
            var room = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14);
            var diffArr = new Array(360, 180, 90, 45, 22, 11, 5, 2.5, 1.25, 0.6, 0.3, 0.15, 0.07, 0.03, 0);
            for (var i = 0; i < diffArr.length; i++) {
                if ((diff - diffArr[i]) >= 0) {
                    return room[i];
                }
            }
            return 14;
        }

        //通过经纬度获取中心位置和缩放级别
        function getCenterPoint(maxJ, minJ, maxW, minW) {
            if (maxJ < minJ) {
                var minJ2 = maxJ
                maxJ = minJ
                minJ = minJ2
            }
            if (maxW < minW) {
                var minW2 = maxW
                maxW = minW
                minW = minW2
            }
            if (maxJ == minJ && maxW == minW) return [maxJ, maxW, 9];
            var diff = maxJ - minJ;
            if (diff < (maxW - minW)) diff = maxW - minW;
            diff = parseInt(10000 * diff) / 10000;
            var centerJ = minJ * 1000000 + 1000000 * (maxJ - minJ) / 2;
            var centerW = minW * 1000000 + 1000000 * (maxW - minW) / 2;
            var zoom = getRoom(diff);
            return [centerJ / 1000000, centerW / 1000000, zoom];
        }

        var userId = app.userId
        if (app.firstFace.signInLongitude && app.firstFace.arrivalsLongitude) {
            //2个点
            var CenterPoint = getCenterPoint(app.firstFace.signInLongitude, app.firstFace.arrivalsLongitude, app.firstFace.signInLatitude, app.firstFace.arrivalsLatitude)
            var point = new BMap.Point(CenterPoint[0], CenterPoint[1]);
            map.centerAndZoom(point, CenterPoint[2] - 1);
            var p1 = new BMap.Point(app.firstFace.signInLongitude, app.firstFace.signInLatitude);
            var p2 = new BMap.Point(app.firstFace.arrivalsLongitude, app.firstFace.arrivalsLatitude);
            var chaJ = Math.abs(Number(app.firstFace.signInLongitude) - Number(app.firstFace.arrivalsLongitude))
            var chaW = Math.abs(Number(app.firstFace.signInLatitude) - Number(app.firstFace.arrivalsLatitude))
            map.enableMapClick = false;
            var startIcon = new BMap.Icon("/dist/img/start.png", new BMap.Size(74, 106), {
                    imageOffset: new BMap.Size(0, -25)
                }
            );
            if (chaJ < 0.001 && chaW < 0.001) {
                var endIcon = new BMap.Icon("/dist/img/end.png", new BMap.Size(74, 106), {
                        imageOffset: new BMap.Size(10, -25)
                    }
                );
            } else {
                var endIcon = new BMap.Icon("/dist/img/end.png", new BMap.Size(74, 106), {
                        imageOffset: new BMap.Size(0, -25)
                    }
                );
            }
            var marker = new BMap.Marker(p1, {icon: startIcon});  // 创建标注
            marker.addEventListener("click", function () {
                //alert("签到");
                getSignInPic(userId)
            });
            var marker2 = new BMap.Marker(p2, {icon: endIcon});  // 创建标注
            marker2.addEventListener("click", function () {
                //alert("首面");
                getFirstVisitPic(userId)
            });
            map.addOverlay(marker);
            map.addOverlay(marker2);
            var myCompOverlay = new ComplexCustomOverlay(p1, "考勤签到 " + new Date(app.firstFace.signTime).Format("hh:mm"));
            if (chaJ < 0.001 && chaW < 0.001) {
                var myCompOverlay2 = new ComplexCustomOverlay2(p2, "首次面访签到 " + new Date(app.firstFace.firstVisitTime).Format("hh:mm"));
            } else {
                var myCompOverlay2 = new ComplexCustomOverlay(p2, "首次面访签到 " + new Date(app.firstFace.firstVisitTime).Format("hh:mm"));

            }
//            map.addOverlay(myCompOverlay);
//            map.addOverlay(myCompOverlay2);
            map.disableDragging();

        } else if (app.firstFace.signInLongitude) {
            //1个点
            var point = new BMap.Point(app.firstFace.signInLongitude, app.firstFace.signInLatitude);
            map.centerAndZoom(point, 13);
            var startIcon = new BMap.Icon("/dist/img/start.png", new BMap.Size(74, 106), {
                    imageOffset: new BMap.Size(0, -25)
                }
            );
            var marker2 = new BMap.Marker(point, {icon: startIcon});  // 创建标注
            marker2.addEventListener("click", function () {
                //alert("签到");
                getSignInPic(userId)
            });
            map.addOverlay(marker2);
            var myCompOverlay = new ComplexCustomOverlay(point, "考勤签到 " + new Date(app.firstFace.signTime).Format("hh:mm"));
//            map.addOverlay(myCompOverlay);
        } else {
            var point = new BMap.Point(app.firstFace.arrivalsLongitude, app.firstFace.arrivalsLatitude);
            map.centerAndZoom(point, 13);
            var endIcon = new BMap.Icon("/dist/img/end.png", new BMap.Size(74, 106), {
                    imageOffset: new BMap.Size(0, -25)
                }
            );
            var marker2 = new BMap.Marker(point, {icon: endIcon});  // 创建标注
            marker2.addEventListener("click", function () {
                //alert("首面");
                getFirstVisitPic(userId)
            });
            map.addOverlay(marker2);
            var myCompOverlay = new ComplexCustomOverlay(point, "首次面访签到 " + new Date(app.firstFace.firstVisitTime).Format("hh:mm"));
//            map.addOverlay(myCompOverlay);
        }
        map.disableDragging();


    }
</script>
<script>
    Vue.directive('line-inserted2', {
        inserted: function (el, binding) {
            showCalendar();
        }
    });

    function showCalendar() {
        var id = "#demo-box";
        $.wyui.postMethod("/newAppReportForZSQ/getCalendar.json", {
            "userId": app.userId,
            "dateTime": new Date().Format("yyyy-MM"),
        }, function (data) {
            var res = app.get_date(data)
            console.log(res)
            $(id).calendar({
                ele: id, //依附
                title: '',
                data: res
            });
        });

    }


    function getSignInPic(userId) {
        var obj = {
            dialog: 'show'
        }
        prompt(JSON.stringify(obj))
        var that = this;
        $.wyui.postMethod("/signIn/getSignInByDay.json", {
            userId: userId,
            signDate: new Date().Format("yyyy-MM-dd"),
        }, function (data) {
            var obj = {
                dialog: 'hidden'
            }
            prompt(JSON.stringify(obj))
            var url1 = data.signUrl
            var url2 = data.signOutUrl
            var urls = ""
            if (url1) {
                urls = url1
            }
            if (url2) {
                urls = url1 + ',' + url2
            }
            var obj = {
                type: 'img',
                imgList: urls,
                position: 0,
                item: JSON.stringify(data)
            }
            prompt(JSON.stringify(obj))
        });
    }

    function getFirstVisitPic(userId) {
        var obj = {
            dialog: 'show'
        }
        prompt(JSON.stringify(obj))
        var that = this;
        $.wyui.postMethod("/wreportCusVisit/getFirstVisit.json", {
            userId: userId,
            reportDate: new Date().Format("yyyy-MM-dd"),
            visitMode: "1"
        }, function (data) {
            var obj = {
                dialog: 'hidden'
            }
            prompt(JSON.stringify(obj))
            if (data && data.length > 0) {
                var first = data[0]
                console.log(first)

                var url1 = first.arrivalsImg
                var url2 = first.leaveImg
                var urls = ""
                if (url1) {
                    urls = url1
                }
                if (url2) {
                    urls = url1 + ',' + url2
                }
                var obj = {
                    type: 'img',
                    imgList: urls,
                    position: 0
                }
                prompt(JSON.stringify(obj))
            }
        });
    }

</script>

</body>
</html>